<template>

  <div id="Switch_League_container">
    <!-- 创建联赛弹出层 -->
    <van-popup
      v-model="CreateLeague_show"
      closeable
      position="right"
      close-icon-position="top-left"
      :style="{ height: '100%' ,width:'100%'}">
      <CreateLeague></CreateLeague>
    </van-popup>
    <!-- 顶部导航栏 -->
    <div class="nav-contianer">
      <van-nav-bar
        title="切换联赛"
        @click-right="onClickRight"
      >
        <template #right>
          <van-icon name="plus" size="18" color="white"/>
        </template>
      </van-nav-bar>
    </div>
    <!-- 搜索栏 -->
    <van-search
      v-model="value"
      shape="round"
      background="rgb(240, 240, 240)"
      placeholder="请输入搜索关键词"
    />
    <!-- 内容栏 -->
    <div
      class="container_box"
       v-for="(item,index) in this.CreateLeague"
      :key="index"
      @click="checked({data:index,value:item.data},$event)"
      :style="{color:'black'}"
    >
      <div class="box_left">
        <van-image
          round
          width="2.5rem"
          height="2.5rem"
          :src="item.data[0].logoflag?item.data[0].logo[0].url:item.data[0].logo[0].content"
        />
      </div>
      <div class="box_center">
        <span>{{ item.data[0].id }}</span>
      </div>
      <div class="box_right">
        <span>裁判员</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CreateLeague from '@/components/Create_League/Create_League.vue'

export default {
  name: 'SwitchLeague',
  data() {
    return {
      CreateLeague_show: false,
      value: '',
      a: 1
    }
  },
  computed: {
    ...mapState(['CreateLeague', 'Leaguecheck'])
  },
  components: {
    CreateLeague
  },
  methods: {
    onClickRight() {
      this.$toast('创建联赛')
      this.CreateLeague_show = true

      // console.log(this.CreateLeague)
    },
    checked(data) {
      this.$store.state.logoindex = data.data
      console.log(this.$store.state.logoindex)
      this.Leaguecheck.splice(0, 0, data.value[0])
      console.log('选中的联赛名称', this.CreateLeague[this.$store.state.logoindex])

      if (this.a % 2 === 0) {
        document.getElementsByClassName('container_box')[data.data].style.color = 'black'
      } else {
        document.getElementsByClassName('container_box')[data.data].style.color = 'red'
      }
      this.a++
    }
  }
}
</script>

<style scoped>
/* #Switch_League_container{
  background-color: rgb(240, 240, 240);
} */
.van-nav-bar{
  height: 12vw;
  background-color: black;
}
::v-deep .van-icon-arrow-left,::v-deep .van-nav-bar__text,::v-deep .van-nav-bar__title,::v-deep .van-nav-bar__text{
  color: white;
}
.container_box{
  background-color: rgb(240, 240, 240);
  height: 13vw;
  margin-top: 2vw;
}
.container_box div{
  float: left;
}
.box_center{
  width: 70%;
}
span{
  font-size: 3vw;
}
.box_center span{
  display: inline-block;
  width: 100%;
  height: 12vw;
  line-height: 12vw;
  /* background-color:brown; */
  margin-left: 3vw;
}

.box_left,.box_right{
  width: 15%;
  height: 12vw;
  line-height: 12vw;
  /* background-color: aqua; */
}
.box_left{
  position: relative;
}
.van-image{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.box_right{
  float: right;
}
</style>
